<template>
  <div class="submitted-status">
    <h3>您的申请已提交</h3>
    <p style="line-height: 20px">感谢您的提交，您的申请正在等待审核。</p>

    <!-- 显示申请详细信息 -->
    <div class="application-details" v-if="!isEditing">
      <div class="original-data">
        <p><strong>竞赛名称：</strong>{{ application.competitionName }}</p>
        <p><strong>指导教师：</strong>{{ application.competitionTutor }}</p>
        <p><strong>竞赛时间：</strong>{{ application.competitionTime }}</p>
        <p><strong>参赛方式：</strong>{{ application.participationMode === 0 ? '线上' : '线下' }}</p>
        <p v-if="application.participationMode === 1"><strong>竞赛地点：</strong>{{ application.competitionPosition }}</p>
        <p><strong>参赛类型：</strong>{{ application.participantType === 0 ? '个人' : '团队' }}</p>
        <p v-if="application.participantType === 1"><strong>团队成员：</strong>{{ application.teamMembers || '无' }}</p>
        <p v-if="application.participantType === 1"><strong>团队排名：</strong>{{ application.teamRank || '未获奖' }}</p>
      </div>
    </div>

    <!-- 显示修改前的数据框 -->
    <div class="application-details" v-if="isEditing">
      <h4 class="title_edit"><el-icon><Lock /></el-icon>修改前的数据</h4>
      <div class="original-data">
        <p><strong>竞赛名称：</strong>{{ application.competitionName }}</p>
        <p><strong>指导教师：</strong>{{ application.competitionTutor }}</p>
        <p><strong>竞赛时间：</strong>{{ application.competitionTime }}</p>
        <p><strong>参赛方式：</strong>{{ application.participationMode === 0 ? '线上' : '线下' }}</p>
        <p v-if="application.participationMode === 1"><strong>竞赛地点：</strong>{{ application.competitionPosition }}</p>
        <p><strong>参赛类型：</strong>{{ application.participantType === 0 ? '个人' : '团队' }}</p>
        <p v-if="application.participantType === 1"><strong>团队成员：</strong>{{ application.teamMembers || '无' }}</p>
        <p v-if="application.participantType === 1"><strong>团队排名：</strong>{{ application.teamRank || '未获奖' }}</p>
      </div>
      <h4 class="title_edit"><el-icon><Unlock /></el-icon>修改后的数据</h4>
      <div class="editable-data">
        <p><strong>竞赛名称：</strong><el-input v-model="editableApplication.competitionName" /></p>
        <p><strong>指导教师：</strong><el-input v-model="editableApplication.competitionTutor" /></p>
        <!-- 修改竞赛时间为时间选择器 -->
        <p><strong>竞赛时间：</strong>
          <el-date-picker 
            v-model="editableApplication.competitionTime" 
            type="datetime" 
            placeholder="请选择日期和时间" 
            style="width: 100%;" 
            format="YYYY/MM/DD HH:mm:ss"
            @change="handleDate_apply" />
        </p>
        <p><strong>参赛方式：</strong>
          <el-radio v-model="editableApplication.participationMode" :label="0">线上</el-radio>
          <el-radio v-model="editableApplication.participationMode" :label="1">线下</el-radio>
        </p>
        <p v-if="editableApplication.participationMode === 1"><strong>竞赛地点：</strong><el-input v-model="editableApplication.competitionPosition" /></p>
        <p><strong>参赛类型：</strong>
          <el-radio v-model="editableApplication.participantType" :label="0">个人</el-radio>
          <el-radio v-model="editableApplication.participantType" :label="1">团队</el-radio>
        </p>
        <p v-if="editableApplication.participantType === 1">
          <strong>团队成员：</strong>
          <el-input 
            v-model="editableApplication.teamMembers" 
            placeholder="别忘记写上自己"
          />
        </p>
        <p v-if="editableApplication.participantType === 1">
          <strong>团队排名：</strong>
          <el-input 
            v-model="editableApplication.teamRank" 
            placeholder="你在上述成员中的顺位"
          />
        </p>
      </div>
    </div>

    <!-- 编辑和撤回按钮 -->
    <div class="actions">
      <el-button @click="cancelEdit" type="primary" v-if="isEditing && !isModified">退出修改</el-button>
      <el-button @click="submitModification" type="primary" v-if="isEditing && isModified">提交修改</el-button>
      <el-button @click="editApplication" type="primary" v-if="!isEditing">编辑修改</el-button>
      <el-button @click="withdrawApplication" type="danger">撤回申请</el-button>
    </div>
  </div>
</template>

<script>
import { delCompetitionApply, modifiedApplication } from "@/api/competition/index.js";
import { convertISOToBasicString } from "@/utils/common1.js";
export default {
  props: {
    // 接收父组件传来的竞赛申请数据
    application: Object
  },
  data() {
    return {
      isEditing: false, // 是否处于编辑模式
      isModified: false, // 是否有修改
      editableApplication: { ...this.application }, // 创建一份可编辑的副本
    };
  },
  methods: {
    // 进入编辑模式
    editApplication() {
      this.isEditing = true;
    },
    handleDate_apply(value){
      this.editableApplication.competitionTime = convertISOToBasicString(value);
    },
    // 提交修改
    async submitModification() {
      // 校验逻辑
      if (this.editableApplication.participationMode === 1 && !this.editableApplication.competitionPosition) {
        this.$message.error('请填写竞赛地点！');
        return;
      }
      if (this.editableApplication.participantType === 1 && !this.editableApplication.teamMembers) {
        this.$message.error('请填写团队成员！');
        return;
      }
      if (this.editableApplication.participantType === 1 && !this.editableApplication.teamRank) {
        this.$message.error('请填写团队排名！');
        return;
      }

      // 打印最新修改后的信息
      console.log('最新修改后的信息：', this.editableApplication);

      try {
        // 调用接口提交修改后的数据
        const data = await modifiedApplication(this.editableApplication);

        if (!data.code) {
          // 请求成功，处理成功后的逻辑
          this.$message.success('竞赛申请修改成功！');
          this.$emit("hanleQeury")
        } else {
          // 请求失败，显示错误信息
          console.log("postCptApply", data);
          this.$message.error('请重新提交');
        }
      } catch (error) {
        // 错误处理
        console.error('提交失败:', error);
        this.$message.error('请求失败，请检查网络或稍后再试！');
      }
      this.isEditing = false; // 提交修改后退出编辑模式
      // 通知父组件关闭 dialog
      this.$emit('closeDialog');
    },

    // 退出编辑模式
    cancelEdit() {
      this.isEditing = false;
      this.editableApplication = { ...this.application }; // 重置为原始数据
      this.isModified = false; // 标记未修改
    },
    // 撤回申请
    async withdrawApplication() {
      try {
        // 调用接口撤回申请
        const data = await delCompetitionApply(this.application.id);

        if (!data.code) {
          // 请求成功，处理成功后的逻辑
          this.$message.success('撤回竞赛申请成功！');
          this.$emit("hanleQeury")
        } else {
          // 请求失败，显示错误信息
          console.log("postCptApply", data);
          this.$message.error('请重试');
        }
      } catch (error) {
        // 错误处理
        console.error('撤回失败:', error);
        this.$message.error('撤回失败，请检查网络或稍后再试！');
      }
      // 通知父组件关闭 dialog
      this.$emit('closeDialog');
    }
  },

  watch: {
    // 监听是否有修改
    editableApplication: {
      handler(newValue) {
        // 判断是否有修改（比对对象）
        this.isModified = JSON.stringify(newValue) !== JSON.stringify(this.application);
      },
      deep: true // 深度监听对象变化
    }
  }
}
</script>

<style scoped>
.submitted-status {
  padding: 20px;
  border: 1px solid #ebeef5;
  background-color: #f9fafc;
  border-radius: 5px;
}
.application-details {
  margin-top: 20px;
  font-size: 16px;
}
.original-data {
  background-color: #f1f1f1;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 20px;
  font-size: 16px;
}
.editable-data {
  background-color: #ffffff;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}
.application-details p {
  margin-bottom: 15px; /* 调整项与项之间的间距 */
}
.actions {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.title_edit {
  margin-bottom: 5px;
  font-weight: bold;
}
</style>
